import './index.css'
import React,{useState} from 'react';
import { Button, Modal,Menu , Form, Input,Carousel  } from 'antd';
// import type { FormProps } from 'antd';
import { DownOutlined, SearchOutlined, QuestionCircleOutlined,SmileOutlined, AppstoreOutlined, MenuOutlined, SettingOutlined  } from '@ant-design/icons';

const onFinish = async (values) => {
  // console.log('Success:', values);
  // let res = await getLogin(values)
  // if (res.data.code === 200) {
  //   localStorage.setItem('token', res.data.token)
    window.location.href='#/home'
  // }
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};


let Login = () => {
const items = [
{
    label: '模板素材',
    key: 'mbcc',
    icon: <DownOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '设计场景',
    key: 'mail',
    icon: <DownOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '资源教程',
    key: 'app',
    icon: <AppstoreOutlined />,
     children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    label: '订阅方案',
    key: 'SubMenu',
    icon: <SettingOutlined />,
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    key: 'alipay',
    label:'可画AI'
  },
  {
  
    label:'客户端'
  }
];

  const [isModalOpen, setIsModalOpen] = useState(false);
//顶部登录弹框
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

   const [current, setCurrent] = useState('mail');
  const onClick = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };


  const contentStyle= {
  margin: 0,
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
    return (
        <div className='home'>
        <header>
          <MenuOutlined className='leftb' />
          <img src='https://static.canva.cn/web/images/e1787d84651689b6f20de2ebd8d86baf.svg'  />
          <div className='drop-down'>
            <Menu className='Menu' onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
          </div>
          <div className='search'>
            <SearchOutlined className='l1' />
            <QuestionCircleOutlined className='l1' />
          </div>
          <div className='dlzc'>
           <Button onClick={showModal} >登录</Button>
            <Button className='zcym'>注册</Button>
          </div>
<Modal className='Modal' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width="700px" footer={null}>
            <div className='left'>
              <h1>欢迎回来！</h1>
           <Form className='dlleft'
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
              >
    <Form.Item
      label="用户名"
      name="username"
      rules={[
        {
          required: true,
          message: 'Please input your username!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
            </div>
            <div className='right'>
            <img src='https://static.canva.cn/authenticating/auth_dialog/auth_dialog_zh-CN.jpg' />
            </div>
      </Modal>
          </header>
          <main>
          <div className='h1dy'>
            <h1>今天你想设计什么？</h1>
            <p>使用Canva可画,轻松创建并分享专业设计。</p>
            <p className='p1'><Button type="primary">开始设计</Button></p>
          </div>
          <div className='lslbt'>
           <Carousel arrows infinite={false} colorBgContainer="#f00">
      <div className='mmmm'>
       444444
      </div>
    </Carousel>
          </div>
        </main>
        <footer>
          <div>放心使用！登录即可确保作品储存在你的帐户中。</div>
          
          <div><Button>随随便</Button>
            <Button className='dydl'>登录</Button></div>
        </footer>
        </div>
)
}

export default Login



